<template>
  <div>
    <div style="margin: 3px;">
      <h1 style="font-size: 30px;text-align: center;">站点查看回收员信息</h1>
      <el-button style="float: left;margin-right: 20px;" @click="addRecycle"  v-if="this.siteRole==0?true:false" type="primary">新增回收员</el-button>
      <!-- 新增回收员弹框 -->
      <el-dialog title="回收人员信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form ref="recycleInfo" :model="recycleInfo" label-width="100px">
          <el-form-item label="回收员姓名">
            <el-input v-model="recycleInfo.recycleName"></el-input>
          </el-form-item>
          <el-form-item label="回收员电话">
            <el-input v-model="recycleInfo.recyclePhone"></el-input>
          </el-form-item>
          <el-form-item label="回收员年龄">
            <el-input v-model="recycleInfo.recycleAge"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 账号状态下拉框 -->
      <el-select  style="float: left;"  @change="selectState(state)" v-model="state" clearable placeholder="选择状态">
        <el-option  v-for="sl in stateList" :key="sl.state" :label="sl.orderState" :value="sl.state">
        </el-option>
      </el-select>
    </div>
    <!-- 回收员信息列表 -->
    <div style="border: 1px silver solid;width: 1200px;height: 500px;margin-top: 42px;">
      <el-table ref="multipleTable" :data="recycleList"  style="width: 100%;" >
        <el-table-column  type="index"  width="40">
        </el-table-column>
        <el-table-column prop="recycleName" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="recyclePhone" label="电话" width="120">
        </el-table-column>
        <el-table-column prop="recycleAge" sortable label="年龄" width="100">
        </el-table-column>
        <el-table-column  width="130">
          <template slot="header" slot-scope="scope">回收员头像</template>
          <template slot-scope="scope"><el-image :src="scope.row.recycleHeader"></el-image></template>
        </el-table-column>
        <el-table-column prop="recycleStore" label="评分" width="80">
        </el-table-column>
        <el-table-column prop="recycleAccountDTO.recycleAccount" label="账号" width="140">
        </el-table-column>
        <el-table-column   label="账号状态" width="80">
          <template slot-scope="scope">
            <span>
              {{scope.row.recycleAccountDTO.state==0?"正常":scope.row.recycleAccountDTO.state==1?"禁用":"删除"}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="recycleAccountDTO.addTime" sortable label="创建时间" width="160">
        </el-table-column>
        <el-table-column prop="recycleAccountDTO.updateTime" sortable label="更新时间" width="160">
        </el-table-column>
        <el-table-column prop="recycleAccountDTO.operator"  label="操作人" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="primary" @click="setState(scope.row,1)" size="small">禁用</el-button>
            <el-button type="primary" @click="setState(scope.row,0)" size="small">启用</el-button>
            <el-button type="danger" v-if="siteRole==0?true:false"  @click="setState(scope.row,2)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SiteSelectRecycle",
    data() {
      return {
        recycleInfo:{},
        dialogVisible:false,
        state:'',
        recycleList:[],
        stateList:[
          {state:'0',orderState:'启用'},
          {state:'1',orderState:'禁用'},
          {state:'2',orderState:'删除'},
        ],
        siteRole:''
      }
    },
    methods: {

      //确定按钮
      confirm(){
        this.$http.post("/site/recycleInfo/add.site",this.recycleInfo).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message)
            this.showRecycleInfo()
            this.dialogVisible = false
          }else{
            alert(resp.data.message)
          }
        })
      },

      //取消按钮
      cancel(){
        this.recycleInfo={}
        this.dialogVisible = false
      },

      // 弹框取消按钮
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      //新增回收员信息
      addRecycle(){
        this.dialogVisible = true
      },

      //设置回收员账号（禁用，启用，删除）
      setState(row,state){
        this.$http.post("/site/recycleAccount/siteSetUpdate.site",{
          recycleAccountId:row.recycleAccountDTO.recycleAccountId,
          state:state,
          }).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message)
            this.showRecycleInfo()
          }else{
            alert(resp.data.message)
          }
        })
      },

      //下拉框
      selectState(){
        this.common(this.state)
      },

      //展示回收员信息
      showRecycleInfo(){
        this.common(this.state)
      },

      //回收员查询（公共）
      common(state){
        this.$http.post("/site/recycleInfo/siteListSelect.site",{state:this.state}).then(resp=>{
          this.recycleList = resp.data.data
        })
      },

      showSiteAccount(){
       let siteAccount = JSON.parse(localStorage.getItem("siteAccountMessage"))
       this.siteRole = siteAccount.siteRole
      }
    },
    created() {
      this.showRecycleInfo()
      this.showSiteAccount()
    }

  }
</script>

<style>
</style>
